<template>
	<!-- 活动详情 -->
	<view class="app-container">
		<view class="detail">
			<!-- <button v-if="this.info.videolink" class="linkBtn" @click="openWebView">打开连接观看视频</button> -->
			
			<view class="title" style="text-align: left;font-size: 44rpx;">{{info.title}}</view>
			<view class="description" v-html="info.content" style="text-align: initial;"></view>
			<video class="video" v-if="info.videolink" :src="info.videolink" :poster="info.src" controls></video>
			
		</view>
		<view class="notes">
			<view class="top">
				<view class="number">{{list.length}}条留言</view>
				<view class="button" @click="showMessageModal=true">写留言</view>
			</view>
			<view class="notes-item" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.avatarurl"></image>
				<view class="right">
					<view class="name">{{item.nickname}}</view>
					<view class="time">{{item.addtime}}</view>
					<view class="description">{{item.content}}</view>
				</view>
			</view>
			
		</view>
	</view>
	<message-modal v-show="showMessageModal" :aid='info.id' @close='close'></message-modal>
</template>

<script>
import messageModal from '/components/messageModal.vue'	
import { getArticleInfo, getMessageList,getUserInfo } from '../../api'
import { config } from '../../utils/utils';
	export default {
		components: {
			messageModal
		},
		data() {
			return {
				videolink: 'https://trip.chinahood.net/uploads/ueditor/video/20240705/1720178708317441.mp4',
				showMessageModal: false,
				info: {	
					"id": '',
					"type": "",
					"src": "",
					"title": "",
					"time": "",
					"content": "",
					videolink: "",
				},
				list: [],
				activityDetail: {
					title: '汇丰进博特别报告：海外企业继续看好中国市场',
					description1: '中国的制造业优势、消费市场规模以及数字经济和可持续发展领域的机遇，是吸引海外企业加大布局的主要动力。',
					src: 'https://api.softouchco.com/hsbc/activity_detial.png',
					description2: '汇丰发布为第六届中国国际进口博览会特别定制的《海外企业看中国2023》调查报告。报告显示，受中国疫后经济复苏的鼓舞，超过八成（87%）受访海外企业表示将拓展中国业务布局。',
				},
				notes: {
					total: 10,
					list: [
						{
							avatarurl: '/static/resources/avatar.png',
							nickname: '特有文艺范',
							addtime: '2024-06-03',
							content: '或计。',
						},
						{
							avatarurl: '/static/resources/avatar.png',
							nickname: '特有文艺范',
							addtime: '2024-06-03',
							content: '此次调查面向或计划开拓中国市场的企业。调查显示，海外企业将供应链、技术和创新、数字化能力和平台作为未来一年在中国市场的三大投资重点。',
						}
					]
				}
				
			}
		},
		onLoad(options) {
			// options.id
			let id = options.id;
			// id = 44;
			getArticleInfo(id).then(res=>{
				console.log("res===",res)
				this.info = res.info;
			})
			
			getMessageList({aid:id}).then(res=>{
				if(res.info) {
					this.list = res.info;
				}
			})
			
		},
		methods: {
			openWebView() {
				uni.navigateTo({
					url:'/pages/hsbcWebview/hsbcWebview?videolink=' + this.info.videolink
				})
			},
			close(boolean) {
				if(boolean) {
					getMessageList({aid:this.info.id}).then(res=>{
						this.list = res.info;
					})
					let userInfo = uni.getStorageSync(config.userInfo);
					getUserInfo({openId: userInfo.openid}).then(res=>{
						if(res.info) uni.setStorageSync(config.userInfo,res.info)
					})
				}
				this.showMessageModal = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		display: flex;
		background: #f8f8f8;
		height: 100%;
		text-align: center;
		padding-bottom: 80px;
		.linkBtn {
			color: #808080;
			font-size: 26rpx;
			width: calc(100% - 80rpx);
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			margin: 40rpx;
			border: none;
			&::after {
				content: none;
			}
		}
		.detail {
			width: 100%;
			background: #fcf5e5;
			// background: #fae7b766;
			padding-bottom: 80rpx;
		}
		.title {
			display: none;
			font-size: 22px;	
			line-height: 1.4;
			 width: calc(100% - 60rpx);
			// width: 100%;
			background: #f9e7b7;
			margin: 0rpx;
			padding: 30rpx 30rpx 50rpx 30rpx;
			margin: 0 auto;
		}
		.description {
			font-size: 30rpx;
			line-height: 50rpx;
			// width: calc(100% - 60rpx);
			width: 100%;
			// margin: 0 30rpx;
		}
		.video{
			width: 80%;
		}
		.image {
			width: 100%;
			margin: 30rpx 0;
		}
		
		
		.notes {
			background: transparent;
			width: calc(100% - 60rpx);
			padding: 40rpx 30rpx 0 30rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.number {
					font-size: 22rpx;
					color: #999999;
					line-height: 1.2;
				}
				.button {
					font-size: 24rpx;
					letter-spacing: 0rpx;
					padding:0 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #FFFFFF;
		
					color: #333333;
					text-align: center;
				}
			}
			.notes-item {
				display: flex;
				margin-top: 50rpx;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					min-width: 80rpx;
					min-height: 80rpx;
					// margin-left: 20rpx;
					margin-right: 20rpx;
					border-radius: 50%;
					background: #999999;
				}
				.right {
					width: 100%;
					display: flex;
					flex-direction: column;
					text-align: left;
					.name {
						font-size: 24rpx;
						line-height: 1.2;
						color: #333333;
					}
					.time {
						line-height: 1;
						font-size: 22rpx;
						color: #808080;
						margin-top: 10rpx;
					}
					.description {
						width: 100%;
						margin-top: 20rpx;
						font-size: 24rpx;
						line-height: 2;
						color: #000000;
					}
				}
			}
		}
		
	}

</style>
